<template>
    <a-drawer title="输入条件" :maskClosable="false" placement="right" :visible="show" width="50%" @close="onClose">
        <header>
            <h2><span>模板:{{ item.JobTempletName }}</span> <span>数据源:{{ item.DataSourceName }}</span></h2>
            <a-button icon="plus-circle" class="default-button" @click="singletonAdd">
                添加条件
            </a-button>

        </header>
        <section>
            <a-row type="flex" justify="center" :gutter="[16, 0]" style="margin: 0.9375rem 0">
                <a-col v-for="(titleItem, titleIndex) in titleList" :key="titleIndex" class="flex-justify-center"
                    :span="titleItem.span">
                    {{ titleItem.name }}
                </a-col>
            </a-row>
            <div class="list-box">
                <a-row class="row-class" type="flex" justify="center" :gutter="[16, 0]" v-for="(ditem, dindex) in list"
                    :key="dindex">
                    <a-col class="flex-justify-center" :span="2" :order="1">
                        {{ dindex + 1 }}
                    </a-col>
                    <a-col class="flex-justify-center" :span="7" :order="2">
                        <a-select size="small" style="width: 100%" v-model="ditem.DataFieldType">
                            <a-select-option v-for="fieldTypeItem in fieldTypeList" :key="fieldTypeItem.type">
                                {{ fieldTypeItem.name }}
                            </a-select-option>
                        </a-select>
                    </a-col>
                    <a-col class="flex-justify-center" :span="6" :order="3">
                        <a-select size="small" style="width: 100%" v-model="ditem.DataFieldID"
                            @change="value => dataFieldOnChange(value, dindex)">
                            <a-select-option v-for="item in dataFieldList" :key="item.DataFieldID">
                                {{ item.DataFieldName }}
                            </a-select-option>
                        </a-select>
                    </a-col>
                    <a-col class="flex-justify-center" :span="6" :order="5">
                        <a-input size="small" v-model="ditem.DictionaryName" />
                    </a-col>
                    <a-col class="flex-justify-center" :span="2" :order="12">
                        <a-icon type="close" class="cursor-pointer" @click="delterm(ditem, dindex)" />
                    </a-col>
                </a-row>
            </div>
        </section>
        <div class="foot">

            <a-button type="primary" @click="handleOk">
                确认
            </a-button>
        </div>
    </a-drawer>
</template>
   
<script>
import { getDataFields } from "@/api/DataField";
import { deleteJobFieldDataScript } from "@/api/JobFieldDataScript";
import {
    updateJobFieldDataScripts,
    addJobFieldDataScripts,
    getJobFieldDataScripts,
} from "@/api/JobFieldDataScript";
export default {
    props: ["show", 'item', "list"],
    data() {
        return {
            fieldTypeList: [
                {
                    name: "传入",
                    type: 10,
                },
                {
                    name: "输出",
                    type: 11,
                },
            ], //字段类型
            dataFieldList: [],//字段名称
            titleList: [{ name: "序号", span: 2 }, { name: "字段类型", span: 7, text: 'JobItemName' }, { name: "字段名称", span: 6, text: 'JobItemName' }, { name: "字典名称", span: 6, text: 'JobItemName' }, { name: "操作", span: 2 }] //表头
        };
    },
    methods: {
        /* 选中字段赋值字典 */
        dataFieldOnChange(value, option) {
            let obj = this.dataFieldList.find(item => item.DataFieldID == value)
            this.list[option].DictionaryName = obj.DataFieldName
        },
        //提交函数
        async handleOk() {
            let oldList = [];
            let newList = [];
            this.list.map(async (citm, cidx) => {
                citm.DataSourceID=this.item.DataSourceID
                if (citm.JScriptID) {
                    oldList.push(citm);
                } else {
                    citm.BusinessType = 3;
                    citm.JScriptIndex = cidx + 1;
                    newList.push(citm);
                }
            });
            if (newList.length > 0) {
                let addRes = await addJobFieldDataScripts(newList);
            }
            if (oldList.length > 0) {
                let editRes = await updateJobFieldDataScripts(oldList);
            }
            this.$message.success("保存成功");
            this.onClose()
        },
        //关闭弹窗
        onClose() {
            this.$emit('update:show', false)
        },
        //删除
        delterm(item, index) {
            let that = this;
            this.$confirm({
                title: "提示",
                content: `是否删除序号【${index + 1}】`,
                async onOk() {
                    if (item.JScriptID) {
                        let res = await deleteJobFieldDataScript(item);
                        res.Success
                            ? that.$message.success("删除成功")
                            : that.$message.error(res.Message);
                        that.list.splice(index, 1);
                    } else {
                        that.list.splice(index, 1);
                    }
                },
                onCancel() { },
            });
        },
        //添加项
        singletonAdd() {
            this.$set(this.list, this.list.length, {
                DataSourceID: this.item.DataSourceID,
                DataFieldType: 10,
                DictionaryName: null,
                DataFieldID: null,
                JobItemID: this.item.JobTempletID
            });
        },
        //查询字段名称
        async getDataFieldsFun(type) {
            let res = await getDataFields({
                pageRequestModel: {
                    pageIndex: 1,
                    pageSize: 100,
                },
                DataSourceID: this.item.DataSourceID,
            });
            this.dataFieldList = res.Data.Data

        },
        //获取脚本 结果 BusinessType=2  默认值  BusinessType=1
        async getJobFieldDataScriptsFun(JobItemID, BusinessType) {
            let res = await getJobFieldDataScripts({
                pageRequestModel: {
                    pageIndex: 1,
                    pageSize: 1000,
                },
                JobItemID,
                BusinessType,
            });
            this.list = res.Data.Data
        },
    },
    watch: {
        show: {
            handler(newValue, oldValue) {
                if (newValue) {
                    this.getJobFieldDataScriptsFun(this.item.JobTempletID, 3)
                    this.getDataFieldsFun()
                }
            }
        }
    }
};
</script>
   
<style lang = "less" scoped>
/deep/.ant-drawer-wrapper-body {
    display: flex;
    flex-direction: column;

    .ant-drawer-body {
        flex: 1;
        padding: 10px;
        display: flex;
        flex-direction: column;
    }
}

header {
    display: flex;
    align-items: center;
    // flex-direction: column;
    justify-content: center;

    h2 {
        margin-right: 15px;
        margin-bottom: 0;

        span:nth-child(1) {
            color: #20b2aa;
            margin-right: 10px;
        }
    }
}

section {
    flex: 1;
    display: flex;
    flex-direction: column;
    .list-box{
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

.foot {
    width: 100%;
    border-top: 1px solid #e9e9e9;
    padding: 10px 16px;
    background: #fff;
    text-align: right;
    z-index: 1;
}

.row-class {
    margin-bottom: 10px;
}
</style>